<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">规格参数</a></el-breadcrumb-item>
    </el-breadcrumb>
 <el-card>
      <!-- 显示数据的表格 -->
        <el-table
          :data="TempalteTabData"
          style="width: 100%">
          <el-table-column
            label="Id"
            prop="id">
          </el-table-column>
          <el-table-column
            label="模板名称"
            prop="name">
          </el-table-column>
          <el-table-column
            label="规格参数"
            prop="specNum">
          </el-table-column>
          <el-table-column
            label="参数数量"
            prop="paraNum">
          </el-table-column>
          <el-table-column
            label="参数设置" width="240px">
            <template slot-scope="scope">
              <el-button @click="Tospec(scope.row.id)" size="mini">规格参数</el-button>&nbsp;&nbsp;|
              <el-button @click="Topara(scope.row.id)" size="mini">参数列表</el-button>
            </template>
            </el-table-column>
          <el-table-column
            align="right">
          <!-- 操作 -->
            <template slot="header">
              <el-button size='mini' @click="dialogVisible = true" type="success">add</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showTem(scope.row)">Edit</el-button>
                <el-tooltip class="item" effect="dark" content="数据删除无法修复" placement="bottom-end">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">Delete</el-button>
               </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 数据显示的提示框 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!-- form表单 -->
        <el-form :model="showTemplate" :rules="rules" status-icon label-width="100px" class="demo-ruleForm">
          <el-form-item label="模板名称" prop="name">
            <el-input type="text" v-model="showTemplate.name" @input="e => showTemplate.name = validForbid (e)" autocomplete="off" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="规格参数" prop="specNum" v-if="title == 'update'">
            <el-input type="number" v-model="showTemplate.specNum" autocomplete="off"  :readonly="showTemplate.id>0"></el-input>
          </el-form-item>
          <el-form-item label="参数数量" prop="paraNum"  v-if="title == 'update'" >
            <el-input type="number" v-model="showTemplate.paraNum" autocomplete="off" :readonly="showTemplate.id>0"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="clearTempalteData()">取 消</el-button>
          <el-button type="primary" @click="SavaAndupdate()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      TempalteTabData: [],
      total: 0,
      pageNum: 1,
      pageSize: 8,
      tbTemplate: {},
      searchName: '',
      timeout: null,
      dialogVisible: false,
      showTemplate: {
        specNum: 0,
        paraNum: 0
      },
      title: 'add',
      rules: {
         name: [
            { required: true, message: '请输入模板名称', trigger: 'blur' },
            { min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  created () {
    this.getTempalteListData()
  },
  methods: {
    Topara (id) {
      this.$router.push({
        path: '/goods/para',
        query: {
          id: id
        }
      })
    },
    Tospec (id) {
      this.$router.push({
        path: '/goods/spec',
        query: {
          id: id
        }
      })
    },
    async getTempalteListData () {
      const { data: res } = await this.$http.post(`/goods/template/pageQueryByAll/${this.pageNum}/${this.pageSize}`, this.tbTemplate)
      this.TempalteTabData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
      // console.log(res)
    },
    // 修改回显
    async showTem (row) {
      this.dialogVisible = true
      this.title = 'update'
      const { data: res } = await this.$http.get(`/goods/template/detail/${row.id}`)
      // console.log(res)
      if (res.success === true) this.showTemplate = res.data.tbTemplate
    },
    // 修改
    async handleEdit () {
      const { data: res } = await this.$http.put('/goods/template/update', this.showTemplate)
      if (res.success === true) this.clearTempalteData()
    },
    // 新增
    async submitForm () {
      var judge = false
      this.TempalteTabData.forEach((item, index) => {
        if(item.name == this.showTemplate.name){
          judge = true
          return
        }
      })
      if (judge) {
        this.$message.error("不能插入相同的规格参数");
        this.showTemplate.name = this.showTemplate.name + (Math.round(Math.random() * 10000))
        return
      }
      const { data: res } = await this.$http.post('/goods/template/addTemplate', this.showTemplate)
      // console.log(res)
      if (res.code === 200) this.clearTempalteData()
    },
    // 删除
    async handleDelete (row) {
      const { data: res } = await this.$http.delete(`/goods/template/delete?id=${row.id}`)
      if (res.success === true) {
        this.$message.warning('删除成功')
        this.getTempalteListData()
      }
    },
    // 关闭新增/修改的弹出框
    handleClose () {
      this.clearTempalteData()
    },
    clearTempalteData () {
      this.dialogVisible = false
      this.title = 'add'
      this.showTemplate = {}
      this.getTempalteListData()
    },
    SavaAndupdate () {
      if (this.showTemplate.name != null && this.showTemplate.name != '') {
        // 通过点击事件传参，id判断做那个操作
        if (!this.showTemplate.id) {
          this.submitForm()
        } else {
          this.handleEdit()
        }
      } else {
        this.$message.warning("不能为空")
      }
    }
  }
}
</script>

<style scoped>

</style>
